<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug View</title>
    <style>
        body {
            background: #1e1e1e;
            color: #d4d4d4;
            font-family: 'Consolas', monospace;
            margin: 0;
            padding: 20px;
        }
        #log-container {
            background: #252526;
            border: 1px solid #3c3c3c;
            border-radius: 4px;
            padding: 10px;
            max-height: 90vh;
            overflow-y: auto;
            white-space: pre-wrap;
        }
        .log-entry {
            margin-bottom: 8px;
            padding-left: 10px;
            border-left: 3px solid #3c3c3c;
        }
        .timestamp {
            color: #569cd6;
        }
        .message {
            color: #d4d4d4;
        }
    </style>
</head>
<body>
    <div id="log-container"></div>

    <script>
        const ipcRenderer = window.ipcRenderer;
        const logContainer = document.getElementById('log-container');
        document.addEventListener("DOMContentLoaded", () => {
            window.electron.receiveMessage('carouseldebug', (message) => {
                // console.log('Received message:', message);
                let timestamp;
                const lines = message.split('\n');
                lines.forEach(line => {
                    try {
                        const data = JSON.parse(line);
                        if (data.timestamp) {
                            timestamp = data.timestamp;
                        }
                    } catch (e) {
                        if (!line.startsWith('=') && line.trim()) {
                            appendLog(timestamp, line);
                        }
                    }
                });
            });
        });

        function appendLog(timestamp, content) {
            const entry = document.createElement('div');
            entry.className = 'log-entry';
            entry.innerHTML = `
                <span class="timestamp">[${timestamp}] </span>
                <span class="message">${typeof content === 'object' 
                    ? JSON.stringify(content, null, 2) 
                    : content}</span>
            `;
            logContainer.appendChild(entry);
            logContainer.scrollTop = logContainer.scrollHeight;
        }
    </script>
</body>
</html>